<template>
  <div class="teacher_behavior">
    <div class="titile">
      <h5>{{ title }}</h5>
    </div>
    <div class="row" style="justify-content: space-between;">
      <div class="cel">
        <template>
          <div class="da_value">{{ Math.floor(data.teach_duration / 60) }} min</div>
          <div class="da_name">讲授时长</div>
        </template>
      </div>
      <div class="cel">
        <template>
          <div class="da_value">{{ Math.floor(data.interaction_duration / 60) }} min</div>
          <div class="da_name">互动时长</div>
        </template>
      </div>
      <div class="cel">
        <template>
          <div class="da_value">{{ Math.floor(data.guidance_duration / 60) }} min</div>
          <div class="da_name">指导时长</div>
        </template>
      </div>
      <div class="cel">
        <template>
          <div class="da_value">{{ Math.floor(data.blackboard_duration / 60) }} min</div>
          <div class="da_name">板书时长</div>
        </template>
      </div>
      <div class="cel">
        <template>
          <div class="da_value">{{ Math.floor(data.podium / 60) }} min</div>
          <div class="da_name">讲台时长</div>
        </template>
      </div>
    </div>
    <div class="line"></div>
    <div class="row" style="justify-content: center;">
      <div class="cel">
        <template>
          <div class="da_value">{{ Math.floor(data.trajectory / 60) }} min</div>
          <div class="da_name">巡视时长</div>
        </template>
      </div>
      <div class="cel">
        <template>
          <div class="da_value">{{ data.trajectory_times }} 次</div>
          <div class="da_name">巡视次数</div>
        </template>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: Object,
    title: String
  },
  data() {
    return {

    }
  },
};
</script>
<style scoped>
.teacher_behavior {
  margin-top: 15px;
  height: 245px;
  position: relative;
  background-color: #1D345C;

  h5 {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 20px;
    color: #FFFFFF;
    line-height: 33px;
    text-align: left;
  }

  .line {
    background-color: #196085;
    border: 1px solid #196085;
    width: 90%;
    margin: 15px auto;
  }

  .row {
    display: flex;
    margin: 0 10px;
  }

  .cel {
    padding: 10px 20px;
    text-align: center;
  }

  .titile {
    height: 35px;
    padding-left: 30px;
    background: url('../../../assets/images/teach_ai/title_bg_931.png') center center / 100% 100% no-repeat;
  }

  .da_value {
    font-family: PingFangSC, PingFang SC;
    font-size: 24px;
    color: #FFC770;
    line-height: 34px;
    padding: 10px 0;
  }
}
</style>